<template>
  <div style="padding: 0.1px;">
    <n-form
      style="margin: 20px 20px 0;"
      ref="formRef"
      :label-width="80"
      label-placement="left"
      :model="formValue"
      :rules="rules"
      size="medium"
    >
      <n-form-item label="" path="name">
        <n-input v-model:value="formValue.name" placeholder="账号" />
      </n-form-item>
      <n-form-item label="" path="psw">
        <n-input v-model:value="formValue.psw" placeholder="初始密码" type="password" />
      </n-form-item>
      <n-form-item label="" path="psw">
        <n-input v-model:value="formValue.psw" placeholder="新密码" type="password" />
      </n-form-item>
      <n-form-item label="" path="psw">
        <n-input v-model:value="formValue.psw" placeholder="确认密码" type="password" />
      </n-form-item>
    </n-form>

    <div style="margin-bottom: 15px;">
      <n-flex justify="space-around">
        <n-button type="cancel" @click="cancel">取消</n-button>
        <n-button type="confirm" @click="confirm">确认</n-button>
      </n-flex>
    </div>
  </div>
</template>

<script setup>
import { useMessage } from "naive-ui";
import { ref, onMounted } from "vue";

const props = defineProps(['modalRef'])

const formRef = ref(null);
const message = useMessage();

const formValue = ref({
  user: {
    name: "",
    age: ""
  },
  phone: ""
})
const rules = {
  user: {
    name: {
      required: true,
      message: "请输入姓名",
      trigger: "blur"
    },
    age: {
      required: true,
      message: "请输入年龄",
      trigger: ["input", "blur"]
    }
  },
  phone: {
    required: true,
    message: "请输入电话号码",
    trigger: ["input"]
  }
}

function handleValidateClick(e) {
  e.preventDefault();
  formRef.value?.validate((errors) => {
    if (!errors) {
      message.success("Valid");
    } else {
      console.log(errors);
      message.error("Invalid");
    }
  });
}

function cancel() {
  props.modalRef.close();
}
function confirm() {
  props.modalRef.close();
}

onMounted(() => {
  
})
</script>

<style lang="scss" scoped>
:deep(.n-input) {
  // 输入框文字颜色
  .n-input__input-el {
    color: #574c89 !important;
    caret-color: #574c89; // 光标颜色
    font-weight: bold;

    // Placeholder 颜色
    ::placeholder {
      color: #574c89 !important;
      opacity: 1; /* Firefox */
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #574c89 !important;
    }

    ::-ms-input-placeholder { /* Microsoft Edge */
      color: #574c89 !important;
    }
  }

  // 背景颜色等其他样式保持不变
  border-radius: 2rem !important;
  background: #d1ddea;
}

// 单独设置 placeholder 颜色
:deep(.n-input .n-input__input-el::placeholder) {
  color: red!important;
  opacity: 1;
}

:deep(.n-button--confirm-type),:deep(.n-button--cancel-type) {
  border-radius: 10rem;
  padding-left: 6rem;
  padding-right: 6rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: 2.2rem;
  position: relative;
}
:deep(.n-button--confirm-type) {
  background: linear-gradient(180deg, #f5ec9d 0%, #de833e 70%);
  box-shadow: 0 2px 0px #c44d29;
  color: #ffffff;
  font-weight: bold;
  text-shadow:
    -0.1rem -0.1rem 0 #c44d29,
     0.1rem -0.1rem 0 #c44d29,
    -0.1rem  0.1rem 0 #c44d29,
     0.1rem  0.1rem 0 #c44d29;

  &::after {
    z-index: 999;
    content: '';
    position: absolute;
    right: 0; left: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 10%, #faea5a 50%, rgba(255,255,255,0) 90%);
  }
}
:deep(.n-button--cancel-type) {
  background: linear-gradient(180deg, #64caf7 0%, #438ee3 70%);
  box-shadow: 0 2px 0px #376dbd;
  color: #ffffff;
  font-weight: bold;
  text-shadow:
    -0.1rem -0.1rem 0 #376dbd,
     0.1rem -0.1rem 0 #376dbd,
    -0.1rem  0.1rem 0 #376dbd,
     0.1rem  0.1rem 0 #376dbd;

  &::after {
    z-index: 999;
    content: '';
    position: absolute;
    right: 0; left: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 10%, #62c8f6 50%, rgba(255,255,255,0) 90%);
  }
}
</style>